<template>
    <view>
        <image
            class="hotel-image"
            src="https://files.superbed.cn/proxy/7468686c6f2633337a7570796f326f696c796e7e7978327f72336f68736e793375717d7b796f337a79332b2b332a2a7e247d79782b78257f2f2c2b7e2b792524787a792b2b326c727b"
        ></image>
        <view class="container">
            <view class="hotel-info">
                <text class="hotel-name">{{ hotel.name }}</text>
                <view class="box3">
                    <ant-button type="primary" inline onTap="goumai" className="round">购买</ant-button>
                </view>
                <view class="tags">
                    <block v-for="(item, index) in hotel.tags" :key="index">
                        <text class="tag">{{ item }}</text>
                    </block>
                </view>
                <text class="rating">{{ hotel.rating }}分</text>
            </view>

            <view class="hotel-details">
                <ant-tabs :items="items" :current="current" onChange="onChange">
                    <swiper :current="current" :autoplay="false" :vertical="false" :circular="false" onChange="onSwipeChange">
                        <block v-for="(item, index) in items" :key="index">
                            <swiper-item>
                                <view class="content">
                                    <view class="box2">
                                        <text class="box2">入住: {{ hotel.details.checkIn }}</text>
                                        <text class="box2">退房: {{ hotel.details.checkOut }}</text>
                                        <text class="box2">开业: {{ hotel.details.openingYear }}</text>
                                        <text class="box2">翻新: {{ hotel.details.renovationYear }}</text>
                                        <text class="box2">规模: {{ hotel.details.rooms }}</text>
                                    </view>
                                </view>
                            </swiper-item>

                            <swiper-item>
                                <view class="container" v-for="(item, index1) in xinxi" :key="index1">
                                    <view class="item">
                                        <text class="label">{{ item.title1 }}</text>
                                        <text class="value">{{ item.xq1 }}</text>
                                    </view>

                                    <view class="item">
                                        <text class="label">{{ item.title2 }}</text>
                                        <text class="value">{{ item.xq2 }}</text>
                                    </view>

                                    <view class="item">
                                        <text class="label">{{ item.title3 }}</text>
                                        <text class="value">{{ item.xq3 }}</text>
                                    </view>

                                    <view class="item">
                                        <text class="label">{{ item.title4 }}</text>
                                        <text class="value">{{ item.xq4 }}</text>
                                    </view>

                                    <view class="item">
                                        <text class="label">{{ item.title5 }}</text>
                                        <text class="value">{{ item.xq5 }}</text>
                                    </view>
                                </view>
                            </swiper-item>

                            <swiper-item>
                                <text>无</text>
                            </swiper-item>
                        </block>
                    </swiper>
                </ant-tabs>
            </view>
            <view class="reviews">
                <view class="box">
                    <text>评论</text>
                    <text style="color: #1782e8">查看更多</text>
                </view>
                <block v-for="(item, index) in hotel.reviews" :key="index">
                    <view class="review">
                        <image class="box-image" mode="scaleToFill" :src="item.image" />
                        <text class="text1">{{ item.name }}</text>
                        <text class="review-text">{{ item.text }}</text>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {

    },
    data() {
        return {
            hotel: {
                name: '姑苏天子笑',
                tags: ['好评', '好评', '回头客'],
                rating: 4.7,
                booking: {
                    time: '10-23 周一 - 10-25 周三',
                    duration: '共2晚',
                    title: '大床房',
                    subtitle: '叫醒服务 免费取消'
                },
                details: {
                    checkIn: '14:00 - 18:00',
                    checkOut: '12:00前',
                    openingYear: '2019年',
                    renovationYear: '2019年',
                    rooms: '121间'
                },
                reviews: [
                    {
                        name: 'momoko',
                        image: 'https://www.77shw.com/wp-content/uploads/2018/05/OT20180508170856556.jpg',
                        text: '对于喜欢搭配的老朋友和女朋友来说，还是值得推荐的。热情周到的客服服务，款式大方美观，外观别具一格。室内场馆设施齐全，待孩子放假过完节，应该订购此班项目。'
                    }
                ]
            },
            current: 0,
            items: [
                {
                    title: '店铺信息'
                },
                {
                    title: '注意事项'
                },
                {
                    title: '相关说明'
                }
            ],
            xinxi: [
                {
                    title1: '入住限制:',
                    xq1: '该价格仅适用于持大陆身份证的中国籍客人',
                    title2: '入住方式:',
                    xq2: '请到前台领取钥匙/门卡',
                    title3: ' 安静时间:',
                    xq3: '00:00-06:00期间需保持安静',
                    title4: '派对:',
                    xq4: '允许举办派对/活动',
                    title5: '商业拍摄:',
                    xq5: '允许商业拍摄'
                }
            ]
        };
    },
    onLoad() {
        // Any initialization logic can go here
    },
    methods: {
        onBookingButtonClick() {
            uni.showToast({
                content: '预订功能尚未实现'
            });
        },

        handleTap() {
            uni.navigateTo({
                url: '/pages/Ditu/Ditu'
            });
        },

        hand() {
            uni.navigateTo({
                url: '/pages/jiudianyuding/jiudianyuding'
            });
        },

        onSwipeChange(e) {
            this.setData({
                current: e.detail.current
            });
        },

        onChange(current) {
            this.setData({
                current
            });
        },

        goumai() {
            uni.navigateTo({
                url: '/pages/goumaixiangqing/goumaixiangqing'
            });
        }
    }
};
</script>
<style>
.container {
    padding: 16px;
}

.hotel-image {
    width: 100%;
}

.hotel-info {
    margin-top: 16px;
}

.hotel-name {
    font-size: 24px;
    font-weight: bold;
}

.hotel-subtitle {
    display: flex;
    color: #666;
    font-size: 14px;
    margin-top: 4px;
}

.tags {
    margin-top: 8px;
    display: block;
}

.tag {
    display: inline-block;
    background-color: #1782e8;
    color: white;
    padding: 4px;
    margin-right: 4px;
    border-radius: 10px;
    font-size: 12px;
}

.rating {
    display: inline-block;
    color: #1782e8;
    font-size: 20px;
    margin-top: 20px;
}

.address {
    width: 100%;
    height: 40px;
    margin-top: 8px;
    font-size: 14px;
    color: rgb(67, 64, 64);
    background-color: #bdbfc1;
    line-height: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}
.imagedw {
    width: 15px;
    height: 15px;
    display: inline-block;
}

.booking-info {
    margin-top: 24px;
}

.booking-time {
    display: inline;
    font-size: 18px;
    font-weight: bold;
}

.time-slot {
    display: inline;
    justify-content: space-between;
    margin-top: 8px;
    margin-left: 10px;
}

.booking-image {
    width: 88px;
    height: 88px;
    margin-top: 16px;
}

.booking-details {
    margin-top: 16px;
}

.booking-title {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    bottom: 50px;
    left: 10px;
}

.booking-subtitle {
    color: #1782e8;
    font-size: 14px;
    position: relative;
    left: -50px;
}

.booking-button {
    display: inline-block;
    background-color: #007aff;
    color: white;
    padding: 8px;
    margin-top: 16px;
    width: 80px;
    height: 30px;
    border-radius: 5px;
}

.hotel-details {
    margin-top: 24px;
}

.hotel-details-title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
}
.hotel-details-title1 {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    margin-left: 55px;
}

.review-text {
    display: flex;
    margin-top: 10px;
}
.box1 {
    position: absolute;
    left: 320px;
}
.box2 {
    display: block;
    margin-top: 15px;
}
.box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.box-image {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 10px;
}
.text1 {
    display: inline-block;
    position: relative;
    bottom: 20px;
}
.box3 {
    display: inline-block;
    position: relative;
    left: 150px;
    top: 50px;
}
.content {
    height: 200px;
}
.item {
    margin-bottom: 20rpx;
}

.label {
    font-weight: bold;
}

.value {
    margin-top: 5rpx;
    margin-left: 5px;
}

</style>
